<template>
  <div>
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>

    <!-- 搜索结果列表 -->
    <van-swipe-cell v-show="isShow" v-for="item in list" :key="item.id">
      <van-cell :border="false" :title="item.name" :value="item.ctime" />

      <template slot="right">
        <van-button square type="danger" text="删除" @click="deSearch(item)" />
      </template>
    </van-swipe-cell>

    <!-- 搜索历史 -->
    <div class="searchHistory" v-show="!isShow">
      <div class="top">
        <p>搜索历史</p>
        <van-button size="mini" round class="btn" @click="deleteHistory">删除</van-button>
      </div>
      <div class="tagList">
        <div>
          <van-tag v-for="(item, i) in historyList" :key="i">{{item}}</van-tag>
        </div>
        <p class="noHistory" v-if="historyList.length === 0">暂无搜索历史</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索框内容
      value: '',
      // 搜索内容列表
      list: [],
      // 搜索历史列表
      historyList: [],
      loading: false,
      finished: true,
      isShow: false
    }
  },
  created() {},
  methods: {
    // 获取最新搜索列表数据
    async getList() {
      const { data: res } = await this.$http.get('/api/getprodlist', {
        params: this.value
      })
      if (res.status !== 0) return this.$toast.fail('获取商品失败')
      res.message.forEach(item => {
        item.ctime = item.ctime.substring(0, 10)
      })
      this.list = res.message
      console.log(this.list)
    },
    // 键盘搜索按钮触发
    async onSearch() {
      if (this.value.trim().length === 0) return this.$toast('请输入内容')
      this.getList()
      this.isShow = true
      this.historyList.push(this.value)
    },
    // 取消按钮触发事件
    onCancel() {
      this.isShow = false
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        // 加载状态结束
        this.loading = false
      }, 500)
    },
    // 删除搜索历史
    deleteHistory() {
      this.historyList = []
    },
    // 搜索列表中滑动删除数据
    async deSearch(item) {
      var i = await this.$dialog.confirm({
        title: '删除商品',
        message: '确定永久删除吗'
      })
      console.log(i)
      if (i === 'confirm') {
        const { data: res } = await this.$http.get(`/api/delproduct/${item.id}`)
        console.log(res)
        if (res.status !== 0) return this.$toast.danger('删除失败')
        this.getList()
        this.$toast.success('删除成功')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.searchHistory {
  padding: 0 10px;
}
.top {
  display: flex;
  justify-content: space-between;
}
.btn {
  margin-top: 15px;
}
.searchList li {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
}
.van-tag {
  margin-right: 5px;
}
.noHistory {
  font-size: 12px;
  color: #ccc;
  text-align: center;
}
</style>
